<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" @close="close">
      <el-form :model="book" :rules="rules" ref="bookForm" label-width="100px" class="demo-book">

        <template v-if="this.mode === 'edit'">
          <el-form-item label="编号" prop="id" >
            <el-input v-model="book.id" placeholder="请输入图书ID" disabled="disabled"></el-input>
          </el-form-item>
        </template>

        <el-form-item label="名称" prop="bookName">
          <el-input v-model="book.bookName" placeholder="请输入图书名称"></el-input>
        </el-form-item>

        <el-form-item label="作者" prop="authorName">
          <el-input v-model="book.authorName"></el-input>
        </el-form-item>

        <el-form-item label="价格" prop="price">
          <el-input v-model="book.price"></el-input>
        </el-form-item>

        <el-form-item label="分类" prop="categoryId">
          <el-select v-model="book.categoryId" placeholder="请选择图书分类">
            <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.dictLabel"
                :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="发版时间" required prop="createTime">
          <el-date-picker
              v-model="book.createTime"
              type="date"
              format="yyyy-MM-dd"
              placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="图书状态" prop="status">
          <el-radio-group v-model="book.status">
            <el-radio label="0">上架</el-radio>
            <el-radio label="1">下架</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>


<script>
export default {
  name: 'BookAddOrUpdate',
  props: ["flag", "title", "categoryList", "mode","bookForm"],
  data() {
    return {
      dialogVisible: false,
      book: {
        id: "",
        bookName: "",
        authorName: "",
        price: "",
        categoryId: "",
        createTime: "",
        status: "0"
      },
      rules: {
        bookName: [
          {required: true, message: '请输入名称', trigger: 'blur'},
          {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
        ],
        authorName: [
          {required: true, message: '请输入作者', trigger: 'blur'},
          {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
        ],
        price: [
          {required: true, message: '请输入价格', trigger: 'blur'},
          {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
        ],
        createTime: [
          {required: true, message: '请选择时间', trigger: 'change'}
        ],
        categoryId: [
          {required: true, message: '请至少选择一个活动分类', trigger: 'change'}
        ]
      }
    }
  },
  watch: {
    flag(val) {
      this.dialogVisible = val;
    },
    dialogVisible(val) {
      this.$emit("update:flag", val)
    },
    bookForm(val){
      this.book = val
    }
  },
  methods: {
    submit() {
      if (this.mode === 'add') {
        this.$emit("add-book", this.book)
      }
      if (this.mode === 'edit') {
        this.$emit("edit-book", this.book)
      }
    },
    close(){
      // this.$refs["bookForm"].resetFields()
      this.book = {
        id: "",
        bookName: "",
        authorName: "",
        price: "",
        categoryId: "",
        createTime: "",
        status: "0"
      }
      this.$nextTick(() => {
        this.$refs["bookForm"].clearValidate()
      })
      this.book = this.$options.data().book
    }
  },
  rules: {
    bookName: [
      {required: true, message: '请输入名称', trigger: 'blur'},
      {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
    ],
    authorName: [
      {required: true, message: '请输入作者', trigger: 'blur'},
      {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
    ],
    price: [
      {required: true, message: '请输入价格', trigger: 'blur'},
      {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
    ],
    createTime: [
      {type: 'date', required: true, message: '请选择时间', trigger: 'change'}
    ],
    categoryId: [
      {required: true, message: '请至少选择一个活动分类', trigger: 'change'}
    ]
  }

}

</script>


<style scoped>

</style>